<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/component/commonTagLib.jsp"%>

<!DOCTYPE html>
<html>
<head>
    <title><spring:message code="message.lable.drugqualityspecSeeStd"/></title>
    <%@ include file="/WEB-INF/component/commonCSS.jsp"%>
    <!--[if lt IE 9]>
        <script src="${ctx}/lib/js/html5shiv.min.js"></script>
        <script src="${ctx}/lib/js/respond.min.js"></script>
    <![endif]-->
</head>
<body class="skin-blue-light sidebar-mini fixed skin-blue-light-frame">
                            
    <section class="content-header">
        <h1>配送企业排名</h1>
        <ol class="breadcrumb">
            <li><a href="${ctx}/home.jsp"><i class="fa fa-home"></i><spring:message code="message.lable.first"/></a></li>
                <li><a href="#">统计查询</a></li>
                <li><a href="#">配送企业排名</a></li>
        </ol>
    </section>
        
    <section class="content">
    	<div class=" box box-success">
            <div class="box-body">
             <form  id="form" method="post">
                <div class="input">
                    <div class="textalign1">统计月份<spring:message code="message.yanZheng.maoHao"/></div>
                    <div class="boxinput">
                    		<table style="width:100%">
                    			<tr>
                    				<td style="width:50%">
                    					<input id="startMonth" name="startMonth" class="textinput" type="text" readonly placeholder="2015-11"  data-date-fmt="yyyy-MM"  onfocus="WdatePicker({dateFmt:'yyyy-MM',maxDate:'#F{$dp.$D(\'endMonth\')}'})"/>
                    				</td>
                    				<td>&nbsp;-&nbsp;</td>
                    				<td style="width:50%">
                    					<input id="endMonth" name="endMonth" class="textinput" type="text" readonly placeholder="2015-11"  data-date-fmt="yyyy-MM"  onfocus="WdatePicker({dateFmt:'yyyy-MM',minDate:'#F{$dp.$D(\'startMonth\')}'})"/>
                    				</td>
                    			</tr>
                    		</table>
                    </div>
                     <div class="textalign" >
                         <button id="selectSpec" type="button" onclick="search();" class="btn btn-success btn-sm"><spring:message code="message.button.seachSpacing"/></button>
                    </div>
                </div>
            </form>
            </div>
          </div>
          
    	<div class="box box-success">
    		<div class="box-header with-border">
    			<h3 class="box-title">2015年11月配送企业采购金额前十名</h3>
                <div class="box-tools pull-right">
                    <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                </div><!-- /.box-tools -->
            </div>
            <div class="box-body mchart">
                <div id="mChart" style="height: 500px; width:98%; padding: 8px;"></div>
            </div>
        </div>
        
    </section>
      <%@ include file="/WEB-INF/component/commonJS.jsp"%>
    <script type="text/javascript">
        $(function () {
        	option = {
        		    tooltip : {
        		        trigger: 'axis',
        		        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
        		            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        		        }
        		    },
        		    legend: {
        		        data:[]
        		    },
        		    toolbox: {
        		        show : true,
        		        feature : {
        		            mark : {show: false},
        		            dataView : {show: false, readOnly: false},
        		            magicType : {show: false, type: ['line', 'bar', 'stack', 'tiled']},
        		            restore : {show: false},
        		            saveAsImage : {show: false}
        		        }
        		    },
        		    calculable : true,
        		    xAxis : [
        		        {
        		            type : 'value',
        		            name : '金额(元)'
        		        }
        		    ],
        		    yAxis : [
        		        {
        		            type : 'category',
        		            data : [
        		                    '西安医药',
        		                    '西北医药',
        		                    '国药西北医药',
        		                    '春晖药业',
        		                    '双鹤医药',
        		                    '康健医药',
        		                    '岭南医药',
        		                    '华远医药',
        		                    '华北医药',
        		                    '东港医药'
        		                    ]
        		        }
        		    ],
        		    series : [
        		        {
        		        	barGap:30, 
        		            name:'金额(元)',
        		            type:'bar',
        		            data:[305434,323450,340056,365001,370450,400432,450345,455234,470560,480780]
        		        }
        		    ]
        		};
        	
        	var myChart = echarts.init(document.getElementById('mChart'));
            myChart.setOption(option);
        });
       
    </script>
</body>
</html> 
                          
                  
                  